{extend name="public/common"}

{block name="style"}
<title>上级来文详情</title>
<link rel="stylesheet" href="/home/css/documents/detail.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="header">
        <p class="title">{{detail.title}}</p>
        <p class="publisher">
            <span>{{detail.type_text}}</span>
            <span>{{detail.create_time | timeToString('ymd')}}</span>
        </p>
    </div>
    <div :class="(detail.status == 0 || (detail.status == 1 && detail.is_file == 1))?'body':''">
        <div class="article" v-html="detail.content"></div>
        <div class="box" v-if="detail.attachment.length > 0">
            <p>附件</p>
            <div class="files">
                <div class="file" v-for="i in detail.attachment" @click="downFile(i.path)">
                    <img src="/home/images/documents/doc.png" v-if="i.ext=='doc'"/>
                    <img src="/home/images/documents/pdf.png" v-else-if="i.ext=='pdf'"/>
                    <img src="/home/images/documents/ppt.png" v-else-if="i.ext=='ppt'"/>
                    <img src="/home/images/documents/xls.png" v-else-if="i.ext=='xlsx'"/>
                    <img src="/home/images/documents/zip.png" v-else-if="i.ext=='zip'"/>
                    <img src="/home/images/documents/pic.png" v-else-if="i.ext=='jpg' || i.ext=='png' || i.ext=='jpeg' || i.ext == 'gif'"/>
                    <img src="/home/images/documents/video.png" v-else-if="i.ext=='mp4' || i.ext=='avi'"/>
                    <p>{{i.name}}</p>
                    <a :href="i.path">下载</a>
                </div>
            </div>
        </div>
        <div class="box">
            <p>文件进度</p>
            <div class="schedule">
                <div v-for="child,key in detail.user">
                    <div class="rate">
                        <div class="rate-bar">
                            <i></i>
                            <span v-if="key < 3"></span>
                        </div>
                    </div>
                    <div class="rate-detail">
                        <div class="progress-detail">
                            <div class="detail">
                                <p>{{key | toWord}}</p>
                                <div class="information" v-for="item in child">
                                    <span class="name">姓名：{{item.username}}</span>
                                    <span class="remarks" @click="checkRemark(item)">备注：{{item.remarks}}</span>
                                    <i class="fa fa-angle-down"></i>
                                    <span v-if="item.permission < 3 && item.status == 0" class="none">待分发</span>
                                    <span v-else-if="item.permission < 3 && item.status == 1">已分发</span>
                                    <span v-else-if="item.permission == 3 && item.status == 1" class="none">轮阅中</span>
                                    <span v-else-if="item.status == 2">已归档</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="foot" v-if="detail.status == 0">
        <div class="send" @click="toSend" >我要分发</div>
        <div class="send" @click="placeOnFile" v-if="permission == 2">结束归档</div>
    </div>
    <div class="foot" v-if="detail.status == 1 && detail.is_file == 1">
        <div class="send" @click="placeOnFile">我要归档</div>
    </div>
    <mt-popup  position="center"  v-model="popupVisible" class="remark-popup">
        <p>{{remark.permission < 3?remark.permission == 1?'一级分发':'二级分发':'三级实施'}}</p>
        <div class="content">
            <span>{{remark.username}}</span>
            <span v-if="remark.permission < 3 && remark.status == 0" class="none">待分发</span>
            <span v-else-if="remark.permission < 3 && remark.status == 1">已分发</span>
            <span v-else-if="remark.permission == 3 && remark.status == 1" class="none">轮阅中</span>
            <span v-else-if="remark.status == 2">已归档</span>
        </div>
        <div class="remarks">{{remark.remarks}}</div>
    </mt-popup>
</div>
{/block}

{block name="script"}
<script>
    console.log({$detail});
    console.log({$permission});
    Vue.filter('toWord', function (word) {
        if (word) {
            console.log(word)
            switch (word) {
                case '1':
                    return '一级分发';
                case '2':
                    return '二级分发';
                case '3':
                    return '三级实施';
            }
        }
    });
    var vw = new Vue({
        el: "#app",
        data: {
            detail: {$detail},
            permission: {$permission},
            popupVisible: false,
            remark:{}
        },
        created() {
            this.pushHistory();
        },
        methods: {
            pushHistory() {
                window.addEventListener("popstate", function (e) {
                    self.location.reload();
                }, false);
                var state = {
                    title: "",
                    url: "#"
                };
                window.history.replaceState(state, "", "#");
            },
            toSend() {
                window.location.href = "/home/documents/distribute/id/"+this.detail.communication_id+'.html'
            },
            downFile(url) {
                window.location.href = 'http://ow365.cn/?i=19298&ssl=1&furl=https://' + window.location.host + url;
            },
            placeOnFile() {
                var _this = this;
                _this.$messagebox.prompt('请输入备注内容（选填）').then(function (res) {
                    _this.$indicator.open({
                        text: '正在归档中',
                        spinnerType: 'triple-bounce'
                    });
                    _this.$http.post("{:Url('Documents/detail')}", {
                        'id': _this.detail.id,
                        'remarks': res.value
                    }, {emulateJSON: true}).then(function (res) {
                        console.log(res.data)
                        var data = res.data;
                        if (data.code == 1) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "归档成功",
                                duration: 1500
                            });
                            _this.detail.status = 2;
                            for(var i in _this.detail.user[3]) {
                                if(_this.detail.user[3][i].userid == _this.detail.userid) {
                                    _this.detail.user[3][i].status = 2;
                                }
                            }
                        } else {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "归档失败，请重试！",
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "归档失败，请重试！",
                            duration: 1500
                        });
                    });
                }).catch(function () {

                })
            },
            checkRemark(item) {
                var _this = this;
                this.remark= item;
                _this.popupVisible = true;
            }
        }
    })
</script>
{/block}
